<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cms程序安装</title>
    <link rel="stylesheet" href="__ROOT__/public/static/layui/css/layui.css">
    <style>

        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #1E9FFF;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden;position: relative}

        *{
            margin: 0;
            padding: 0;
        }

        .yzm-img{
            width: 35%;
            float: left;
            margin-left: 10%;
        }

        .yzm-input{
            width: 45%;
            float: left;
        }

        .input{
            margin: 0 auto;
            width: 70%
        }

        .fomr{

        }

        h2{
            text-align: center;
            margin-bottom: 5%;
        }


        .form{
            width: 40%;
            height: 70%;
            position: absolute;
            background: white;
            box-shadow:0 0 8px #eeeeee;
            border-radius:3px;
            left: 25%;
            top: 10%;
            z-index: 999;
            padding-top: 1%;
            padding-left: 3%;
            padding-right: 3%;
        }
        
        .text{
            font-size: 16px;
        }


    </style>
</head>
<body>


<div class="layui-container">
    <div class="box">
        <form  class="form" id="form">
            <h2 style="text-align: center"><i class="layui-icon" style="font-size: 20px;font-weight: bold">&#xe7ae;</i>   项目信息</h2>

            <div class="layui-form-item">
                <label class="layui-form-label text" >项目地址</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid layui-word-aux" style="font-size: 18px;color: black!important">{$url}</div>
                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label text" >账号</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label text" >密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label text" >数据库地址</label>
                <div class="layui-input-block">
                    <input type="text" name="hostname" required  lay-verify="required" placeholder="请输入数据库地址" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label text" >端口号</label>
                <div class="layui-input-block">
                    <input type="text" name="hostport" required  lay-verify="required" placeholder="请输入端口号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label text" >数据库账号</label>
                <div class="layui-input-block">
                    <input type="text" name="dbname" required  lay-verify="required" placeholder="请输入数据库账号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label text" >数据库密码</label>
                <div class="layui-input-block">
                    <input type="password" name="dbpass" required  lay-verify="required" placeholder="请输入数据库密码" autocomplete="off" class="layui-input" value="">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label text" >数据库名称</label>
                <div class="layui-input-block">
                    <input type="text" name="database" required  lay-verify="required" placeholder="请输入数据库名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" id="jdt" style="display: none">
                <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>



            <button type="button" class="layui-btn site-demo-active" style="margin: 1% auto;display: block" data-type="loading" >安装</button>

        </form>

    </div>

</div>





<script src="__ROOT__/public/static/layui/layui.js"></script>
<script src="__ROOT__/public/static/js/jquery-3.4.1.min.js"></script>
<script src="__ROOT__/public/static/js/jquery.Form.js"></script>
<script src="__ROOT__/public/static/js/jquery.particleground.min.js"></script>
<script>



        // 粒子线条背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#7ec7fd'
            });
        });








        layui.use('element', function(){
            var $ = layui.jquery
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                loading: function(othis){


                    $("#form").ajaxSubmit({
                        url:"{:url('install/index/Installation')}",
                        type:"post"
                        ,success: function (rsp){
                             rsp=$.parseJSON(rsp);
                            if (rsp.code>0){
                                $("#jdt").css('display','block')
                                var DISABLED = 'layui-btn-disabled';
                                if(othis.hasClass(DISABLED)) return;

                                //模拟loading
                                var n = 0, timer = setInterval(function(){
                                    n = n + Math.random()*10|0;
                                    if(n>100){
                                        n = 100;
                                        clearInterval(timer);
                                        othis.removeClass(DISABLED);
                                        window.location.href = "{:url('admin/login/index')}";
                                    }
                                    element.progress('demo', n+'%');

                                }, 300+Math.random()*1000);




                                othis.addClass(DISABLED);

                            }else {
                                layer.msg(rsp.message)
                            }

                        }

                    })

                }
            };

            $('.site-demo-active').on('click', function(){
                var othis = $(this), type = $(this).data('type');
                active[type] ? active[type].call(this, othis) : '';
            });



        });



</script>
</body>
</html>